import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { ProTable, ProColumns } from '@ant-design/pro-components';
import { FlowTypeEnum, PayFlowDetailItem, PayFlowTableItem, PayMode } from '../types.d';
import { useModel } from 'umi';
import { Role } from '@/utils/types.d';
import { queryPayFlows } from '../service';
import { useState } from 'react';
import FlowDetail from './FlowDetail';

const PayFlowList = () => {
  const { initialState } = useModel('@@initialState');
  const currUser = initialState?.currentUser;
  const isAdmin = currUser?.role === Role.ADMIN;
  const [detailVisible, setDetailVisible] = useState<boolean>(false);
  const [flowDetails, setFlowDetails] = useState<PayFlowDetailItem[]>([]);
  const [flowType, setFlowType] = useState(FlowTypeEnum.PARKING);
  const columns: ProColumns<PayFlowTableItem>[] = [
    {
      title: '所属用户',
      align: 'center',
      hideInTable: !isAdmin,
      dataIndex: ['ownerInfo', 'ownerName'],
      hideInSearch: !isAdmin,
    },
    {
      title: '平台记录编号',
      align: 'center',
      dataIndex: 'payNo',
      hideInForm: true,
    },
    {
      title: '支付方记录编号',
      align: 'center',
      dataIndex: 'payOrderNo',
      hideInForm: true,
    },
    {
      title: '支付金额',
      dataIndex: 'amount',
      hideInSearch: true,
      hideInForm: true,
      align: 'center',
      valueType: 'money',
      renderText: (text) => (text / 100).toFixed(2),
    },
    {
      title: '支付方式',
      align: 'center',
      dataIndex: 'payMode',
      valueEnum: {
        [PayMode.TENPAY]: { text: '微信支付' },
        [PayMode.ALIPAY]: { text: '支付宝' },
        [PayMode.CASH]: { text: '现金支付' },
        [PayMode.THIRD_PARTY]: { text: '第三方平台' },
        [PayMode.ETC]: { text: 'ETC' },
        [PayMode.UNKNOWN]: { text: '其他' },
      },
    },
    {
      title: '支付时间',
      align: 'center',
      dataIndex: 'payTime',
      valueType: 'dateTime',
      hideInSearch: true,
    },
    {
      title: '流水类型',
      align: 'center',
      dataIndex: 'type',
      valueEnum: {
        [FlowTypeEnum.MEMBER]: { text: '会员购买' },
        [FlowTypeEnum.PARKING]: { text: '停车缴费' },
      },
    },
    {
      title: '支付详情',
      align: 'center',
      dataIndex: 'flowDetail',
      hideInSearch: true,
      hideInForm: true,
      render: (_, record) => {
        return (
          <a
            onClick={() => {
              setFlowDetails(record.flowDetail);
              setFlowType(record.type);
              setDetailVisible(true);
            }}
          >
            明细
          </a>
        );
      },
    },
  ];
  return (
    <PageHeaderWrapper
      header={{
        title: '',
        subTitle: '支付流水',
        breadcrumb: {
          routes: [
            { path: '/', breadcrumbName: '首页' },
            { path: '/parking-orders', breadcrumbName: '订单管理' },
            { path: '/parking-orders/payflows', breadcrumbName: '支付流水列表' },
          ],
        },
      }}
    >
      <ProTable<PayFlowTableItem>
        rowKey="_id"
        columns={columns}
        scroll={{ x: true }}
        search={{ labelWidth: 'auto' }}
        style={{ whiteSpace: 'nowrap' }}
        columnEmptyText="暂无数据"
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 10,
          size: 'default',
        }}
        debounceTime={300}
        request={async (param, sort) => queryPayFlows(param, sort)}
      />
      {detailVisible && (
        <FlowDetail
          visible={detailVisible}
          flowDetails={flowDetails}
          close={() => {
            setDetailVisible(false);
            setFlowDetails([]);
          }}
          type={flowType}
        />
      )}
    </PageHeaderWrapper>
  );
};
export default PayFlowList;
